<%--
  Created by IntelliJ IDEA.
  User: bestick
  Date: 2015/12/18
  Time: 15:14
  天地有万古，此身不再得；人生只百年，此日最易过。幸生其间者，不可不知有生之乐；亦不可不怀虚生之忧。
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <%-- IF IE --%>
    <jsp:include page="${pageContext.request.contextPath}/jsp/home/common/if_ie.jsp"></jsp:include>

    <!-- Charset -->
    <meta charset="utf-8">

    <!-- Title -->
    <title>产品列表</title>

    <!-- Author -->
    <meta name="author" content="www.bestick.cn">

    <!-- Mobile Meta -->
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1,minimum-scale=1, user-scalable=no">

    <!-- Favicon -->
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/resources/app/images/img/logo/favicon.ico">

    <!-- Bootstrap core CSS -->
    <link href="${pageContext.request.contextPath}/resources/libs/css/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Swiper core CSS -->
    <link href="${pageContext.request.contextPath}/resources/libs/css/swiper/swiper.css" rel="stylesheet">

    <!-- BootStrap-Slider core CSS -->
    <link href="${pageContext.request.contextPath}/resources/libs/css/bootstrap-slider/bootstrap-slider.css"
          rel="stylesheet">

    <!-- JuCaiBang core CSS file -->
    <link href="${pageContext.request.contextPath}/resources/app/css/home/jcb.css" rel="stylesheet">

    <!-- Swiper styles -->
    <style>
        body {
            -moz-user-select: none;
            /*火狐*/
            -webkit-user-select: none;
            /*webkit浏览器*/
            -ms-user-select: none;
            /*IE10*/
            -khtml-user-select: none;
            /*早期浏览器*/
            user-select: none;
        }
        .swiper-container {
            width: 100%;
            height: 268px;
            background: #000;
        }

        .swiper-wrapper {
            height: 100%;
        }

        .swiper-slide {
            font-size: 18px;
            color: #fff;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            padding: 40px 60px;
            height: 100%;
        }

        .swiper-pagination {
            margin-top: 0;
            position: absolute;
        }

        .swiper-pagination-bullet {
            opacity: .4;
        }

        .swiper-pagination-bullet-active {
            opacity: 1;
        }

        .parallax-bg {
            position: absolute;
            left: 0;
            top: 0;
            width: 130%;
            height: 100%;
            -webkit-background-size: cover;
            background-size: cover;
            background-position: center;
        }

        .swiper-slide .title {
            font-size: 41px;
            font-weight: 300;
        }

        .swiper-slide .subtitle {
            font-size: 21px;
        }

        .swiper-slide .text {
            font-size: 14px;
            max-width: 400px;
            line-height: 1.3;
        }
    </style>
</head>
<body>
<%-- navbar --%>
<jsp:include page="${pageContext.request.contextPath}/jsp/home/common/nav_search.jsp"></jsp:include>

<!-- banner -->
<div class="productList-banner">
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="parallax-bg"
             style="background-image:url(${pageContext.request.contextPath}/resources/app/images/img/productList/banner1.png);"
             data-swiper-parallax="-23%"></div>
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="title" data-swiper-parallax="-100">聚财邦</div>
                <div class="subtitle" data-swiper-parallax="-200">您身边的理财专家</div>
                <div class="text" data-swiper-parallax="-300">
                    <p>我们帮助您建立优质的投资计划，高回报，低风险，你值得信赖。</p>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="title" data-swiper-parallax="-100">聚财邦</div>
                <div class="subtitle" data-swiper-parallax="-200">您身边的理财专家</div>
                <div class="text" data-swiper-parallax="-300">
                    <p>我们帮助您建立优质的投资计划，高回报，低风险，你值得信赖。</p>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="title" data-swiper-parallax="-100">聚财邦</div>
                <div class="subtitle" data-swiper-parallax="-200">您身边的理财专家</div>
                <div class="text" data-swiper-parallax="-300">
                    <p>我们帮助您建立优质的投资计划，高回报，低风险，你值得信赖。</p>
                </div>
            </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination swiper-pagination-white"></div>
        <!-- Add Navigation -->
        <div class="swiper-button-prev swiper-button-white"></div>
        <div class="swiper-button-next swiper-button-white"></div>
    </div>
</div>

<!-- productList-detail-control -->
<div class="productList-detail-control" style="width: 100%;float: left;">
    <!-- detail -->
    <div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
        <!-- productList-nav -->
        <div class="productList-nav">
            <ul class="productList-tabs">
                <li id="productList-combo" class="productList-combo productList-tabs-active">组合</li>
                <li id="productList-trust" class="productList-trust">信托</li>
                <li id="productList-fund" class="productList-fund dropdown">
                    <div data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        <span id="tabs-fund">基金</span>
                        <span class="icon-icon_down_arrow" aria-hidden="true"></span>
                    </div>
                    <ul class="dropdown-menu question-group-menu">
                        <li>
                            <a href="javascript:void(0)"><span>股票基金</span></a>
                        </li>
                        <li>
                            <a href="javascript:void(0)"><span>债券基金</span></a>
                        </li>
                        <li>
                            <a href="javascript:void(0)"><span>混合基金</span></a>
                        </li>
                        <li>
                            <a href="javascript:void(0)"><span>指数基金</span></a>
                        </li>
                        <li>
                            <a href="javascript:void(0)"><span>货币基金</span></a>
                        </li>
                        <li>
                            <a href="javascript:void(0)"><span>其他基金</span></a>
                        </li>
                    </ul>
                </li>
                <li id="productList-currency" class="productList-currency">货币</li>
                <li id="productList-finance" class="productList-finance">理财</li>
                <li id="productList-asset-management" class="productList-asset-management">资管</li>
                <li id="productList-deposit" class="productList-deposit">存款</li>
            </ul>
        </div>

        <!-- productList-subNav -->
        <div class="productList-subNav">
            <ul class="productList-combo-subTabs"></ul>
            <ul class="productList-trust-subTabs">
                <li class="subTabs-trust-risk">风险<span class="pList-detail-order glyphicon glyphicon-arrow-down"></span></li>
                <li class="subTabs-trust-benefitRate">预期收益<span class="pList-detail-order glyphicon"></span></li>
                <li class="subTabs-trust-term">产品期限<span class="pList-detail-order glyphicon"></span></li>
                <li class="subTabs-trust-minAmount">起购金额<span class="pList-detail-order glyphicon"></span></li>
            </ul>
            <ul class="productList-fund-subTabs">
                <li class="subTabs-fund-feeRate">费率<span class="pList-detail-order glyphicon glyphicon-arrow-down"></span></li>
                <li class="subTabs-fund-cValue">单位净值<span class="pList-detail-order glyphicon"></span></li>
                <li class="subTabs-fund-term">日涨跌幅<span class="pList-detail-order glyphicon"></span></li>
            </ul>
            <ul class="productList-cFund-subTabs">
                <li class="subTabs-fund-feeRate">万份收益<span class="pList-detail-order glyphicon glyphicon-arrow-down"></span></li>
                <li class="subTabs-fund-cValue">七日年化<span class="pList-detail-order glyphicon"></span></li>
            </ul>
        </div>
    </div>
</div>

<!-- productList-detail-container -->
<div class="productList-detail-container" style="width: 100%;float: left;">
    <!-- detail -->
    <div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
        <!-- productList-detail -->
        <div id="productList-detail" class="productList-detail"></div>
    </div>
</div>

<jsp:include page="${pageContext.request.contextPath}/jsp/home/common/footer.jsp"></jsp:include>

<!-- JavaScript files placed at the end of the document so the pages load faster
==================================================================================== -->
<!-- lib and core js files -->
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/libs/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/libs/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/libs/js/swiper.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/libs/js/jsrender.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/libs/js/bootstrap-slider.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/app/js/config.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/app/js/home/common.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/app/js/home/productList.js"></script>

<!-- 组合模版 -->
<script id="productList-combo-temp" type="text/x-jsrender">
    {{for data}}
        <div class="pList-detail-combo" data-comboId="{{:comboId}}" style="background: url({{: ~getPcSuffixPic(picPosition) }}) no-repeat">
            <div class="pList-detail-combo-box">
                <p class="pList-detail-combo-title">
                    {{: comboName}}
                    {{if !isComment }}
                        <span class="pList-detail-collect icon-icon_star pull-right"></span>
                    {{else}}
                        <span class="pList-detail-collect icon-icon_star icon-collect-pitchon pull-right"></span>
                    {{/if}}
                </p>
                <p class="pList-detail-combo-subTitle">
                    {{: comboSubName}}
                    <span class="pull-right">风险：{{: ~comboRisk(comboRank) }}</span>
                    <span class="pull-right" style="margin-right: 48px;">流动性：{{: comboFlexible}}</span>
                </p>
                <p class="pList-detail-combo-content">{{: comboMessage}}</p>
                <p class="pList-detail-combo-subContent">{{: comboTargetPerson}}</p>
                <p class="pList-detail-combo-footer">期限：{{: comboInvestSpan}}月</p>
                <p class="pList-detail-combo-subFooter">期望收益率：{{: ~comboBRFormat(comboValuesBenefitRate) }}%</p>
            </div>
        </div>
    {{/for}}
</script>

<!-- 信托模版 -->
<script id="productList-trust-temp" type="text/x-jsrender">
    {{for data}}
        <div class="pList-detail-trust" data-pid="{{:pId}}">
            <div class="pList-detail-trust-left">
                <div class="pList-detail-trust-risk">
                    <img src="${pageContext.request.contextPath}/resources/app/images/img/productList/risk-level-circle.png" class="pList-detail-trust-risk-level">
                    <img style="transform: rotate({{:product_level/5*180-90}}deg);" src="${pageContext.request.contextPath}/resources/app/images/img/productList/risk-pointer.png" class="pList-detail-trust-risk-pointer">
                    <p class="pList-detail-trust-risk-text">风&nbsp;&nbsp;险</p>
                    <p class="pList-detail-trust-status-block">
                        {{if product_status == 0}}
                            <span class="pList-detail-trust-status pre-sale">预约</span>
                        {{else product_status == 1}}
                            <span class="pList-detail-trust-status on-sale">在售</span>
                        {{else product_status == 2}}
                            <span class="pList-detail-trust-status sold-out">售罄</span>
                        {{/if}}
                    </p>
                </div>
            </div>
            <div class="pList-detail-trust-right">
                <p class="pList-detail-trust-title">
                    {{:product_shortname}}
                    {{if cAssetId==0 }}
                        <span class="pList-detail-collect icon-icon_star pull-right"></span>
                    {{else}}
                        <span class="pList-detail-collect icon-icon_star icon-collect-pitchon pull-right"></span>
                    {{/if}}
                </p>
                <p class="pList-detail-trust-subTitle">{{:product_name}}</p>
                <div class="pList-detail-trust-slider">
                    <input type="text" class="slider" value="" data-slider-min="0" data-slider-max="{{:product_scale}}" data-slider-step="1" data-slider-value="{{:inow_scale}}" data-slider-id="BC" id="B" data-slider-tooltip="hide" data-slider-handle="triangle" data-slider-enabled="false"/>
                    <span class="pList-detail-trust-amount-desc pull-right">规模<span class="pList-detail-trust-amount">{{: (product_scale/100000000).toFixed(2)}}</span>亿</span>
                </div>
                <div class="pList-detail-trust-info">
                    <div class="pList-detail-trust-benefitRate inline-block">
                        {{:max_rate.toFixed(2)}}<span>%</span>
                        <p>预期收益</p>
                    </div>
                    <div class="pList-detail-trust-term inline-block">
                        {{:interest_span}}<span>月</span>
                        <p>产品期限</p>
                    </div>
                    <div class="pList-detail-trust-minAmount inline-block">
                        {{: ~wan(min_limit).toFixed(0) }}<span>万</span>
                        <p>起购金额</p>
                    </div>
                </div>
            </div>
        </div>
    {{/for}}
</script>

<!-- 基金模版 -->
<script id="productList-fund-temp" type="text/x-jsrender">
    {{for data}}
        <div class="pList-detail-fund" data-pid="{{:pId}}">
            <div class="pList-detail-fund-fullWidth">
                <p class="pList-detail-fund-title">
                    <span>{{:pFundName}}&nbsp;{{: fundCode}}</span>
                    {{if cAssetId==0 }}
                        <span class="pList-detail-collect icon-icon_star pull-right"></span>
                    {{else}}
                        <span class="pList-detail-collect icon-icon_star icon-collect-pitchon pull-right"></span>
                    {{/if}}
                </p>
                <div class="pList-detail-fund-info">
                    <div class="pList-detail-fund-FeeRate inline-block">
                        {{:feexv.toFixed(2)}}<span>%</span>
                        <p>费率</p>
                    </div>
                    <div class="pList-detail-fund-cValue inline-block">
                        {{:currentValue.toFixed(4)}}
                        <p>单位净值</p>
                    </div>
                    <div class="pList-detail-fund-growthRate inline-block">
                        <div class="{{: growthRate >= 0 ? 'rise' : 'drop' }}">
                            {{: growthRate.toFixed(2)}}<span>%</span>
                        </div>
                        <p>日涨跌幅</p>
                    </div>
                </div>
            </div>
        </div>
    {{/for}}
</script>

<!-- 货币基金模版 -->
<script id="productList-cFund-temp" type="text/x-jsrender">
    {{for data}}
        <div class="pList-detail-fund" data-pid="{{:pId}}">
            <div class="cFund pList-detail-fund-fullWidth">
                <p class="pList-detail-fund-title">
                    <span>{{:pFundName}}&nbsp;{{: fundCode}}</span>
                    {{if cAssetId==0 }}
                        <span class="pList-detail-collect icon-icon_star pull-right"></span>
                    {{else}}
                        <span class="pList-detail-collect icon-icon_star icon-collect-pitchon pull-right"></span>
                    {{/if}}
                </p>
                <div class="pList-detail-fund-info">
                    <div class="pList-detail-fund-FeeRate inline-block">
                        {{: currentValue.toFixed(4)}}
                        <p>万份收益</p>
                    </div>
                    <div class="pList-detail-fund-growthRate inline-block">
                        <div class="{{: growthRate >= 0 ? 'rise' : 'drop' }}">
                            {{: growthRate.toFixed(2)}}<span>%</span>
                        </div>
                        <p>七日年化</p>
                    </div>
                </div>
            </div>
        </div>
    {{/for}}
</script>

<!-- 货币模版 -->
<script id="productList-currency-temp" type="text/x-jsrender">

</script>

<!-- 理财模版 -->
<script id="productList-finance-temp" type="text/x-jsrender">

</script>

<!-- 资管模版 -->
<script id="productList-asset-Management-temp" type="text/x-jsrender">

</script>

<!-- 存款模版 -->
<script id="productList-deposit-temp" type="text/x-jsrender">

</script>

<!-- functions -->
<script>
    //初始化swiper
    var swiper = new Swiper('.swiper-container', {
        autoplay: 2000,
        pagination: '.swiper-pagination',
        paginationClickable: true,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        parallax: true,
        speed: 600
    });
</script>
</body>
</html>